import React from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { add } from '../../../../../utils/hsyHttp/hsyhttp.jsx'
import {
  Button,
  Form,
  Input,
  Upload,
  message,
  Radio
} from 'antd';
import { useState } from 'react';
import { useNavigate } from "react-router-dom"

// 头部
import PageName from '../../../../../components/PageName/index.jsx';

const getBase64 = (img, callback) => {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result));
  reader.readAsDataURL(img);
};

const AddPersonalUser = () => {
  const [fileList, setFileList] = useState([])
  const navigate = useNavigate()
  //上传头像
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState();
  const handleChange = (info) => {//判断他的类型和大小
    const isJpgOrPng = info.file.type === 'image/jpeg' || info.file.type === 'image/png' || info.file.type === 'image/jpg';
    if (!isJpgOrPng) {
      return message.error('只能上传格式为jpeg/jpg/png的图片');
    }
    const isLt2M = info.file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      return message.error('最大只能上传2M的图片');
    }
    //将文件对象转成base64的地址，img才能显示出来
    getBase64(info.file.originFileObj, (url) => {
      console.log(url);
      setImageUrl(url);
    });

  };
  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div
        style={{
          marginTop: 8,
        }}
      >
        添加
      </div>
    </div>
  );
  const customRequest = () => {
    console.log('customRequest 执行了')
  }

  const [value, setValue] = useState(1);
  const onChange = (e) => {
    console.log('radio checked', e.target.value);
    setValue(e.target.value);
  };

  const Add = (values) => {
    console.log('提交内容', values);
    //第一步，得到一个formData盒子
    let myFormData = new FormData()
    //第二步，讲文件装到这个盒子里面去  组装数据
    // myFormData.append(内容的名字，内容)  如果这个内容是一个文件，放的就是文件对象
    // myFormData.append('myfile1',values.consult_img.file.originFileObj)
    // myFormData.append('s_name',values.consult_title)
    myFormData.append('u_img', values.u_img.file.originFileObj)
    myFormData.append('u_name', values.u_name)
    myFormData.append('u_phone', values.u_phone)
    myFormData.append('u_sex', values.u_sex)
    myFormData.append('u_area', values.u_area)
    myFormData.append('u_price', values.u_price)
    myFormData.append('u_glance', values.u_glance)

    add(myFormData).then(res => {
      navigate('/home/PersonalUser')
      message.success('添加成功')
    })
  }
  // 取消添加
  const cancelAdd = () => {
    navigate('/home/PersonalUser')
    message.warning('已取消添加')
  }

  return (
    <div>
      <PageName name="添加个人用户" />
      <Form
        onFinish={Add}
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 14,
        }}
        layout="horizontal"
        style={{
          maxWidth: 600,
          marginTop:'20px',
        }}
        initialValues={{
          u_img: '',
          u_name: '',
          u_phone: '',
          u_sex: '',
          u_area: '',
          u_price: '',
          u_glance: ''
        }}
      >
        <Form.Item label="添加头像" name="u_img" >
          <Upload
            fileList={fileList}
            name="avatar"
            listType="picture-card"
            className="avatar-uploader"
            showUploadList={false}
            action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
            onChange={handleChange}
            customRequest={customRequest}
          >
            {imageUrl ? (
              <img
                src={imageUrl}
                alt="avatar"
                style={{
                  width: '100%',
                }}
              />
            ) : (
              uploadButton
            )}
          </Upload>
        </Form.Item>

        <Form.Item label="姓名" name="u_name" >
          <Input />
        </Form.Item>

        <Form.Item label="手机号" name="u_phone">
          <Input />
        </Form.Item>

        <Form.Item label="性别" name="u_sex">
          <Radio.Group onChange={onChange} value={value}>
            <Radio value="男">男</Radio>
            <Radio value="女">女</Radio>
            <Radio value="保密">保密</Radio>

          </Radio.Group>
        </Form.Item>

        <Form.Item label="意向区域" name="u_area">
          <Input />
        </Form.Item>

        <Form.Item label="总价预算" name="u_price">
          <Input />
        </Form.Item>

        <Form.Item label="买房目的" name="u_glance">
          <Input />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit">
            确定
          </Button>
          <Button type="primary" htmlType="submit" onClick={() => {
            cancelAdd()
          }}>
            取消
          </Button>
        </Form.Item>

      </Form>
    </div>


  );
};
export default AddPersonalUser;